<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");
        for (var i = 0; i < 3; i++) {
          for (var j = 0; j < 3; j++) {
            // 保存状态
            ctx.save();
            ctx.fillStyle = "rgb(" + 51 * i + ", " + (255 - 51 * i) + ", 255)";
            ctx.translate(10 + j * 50, 10 + i * 50);
            ctx.fillRect(0, 0, 25, 25);
            // 弹出状态
            ctx.restore();
          }
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
<style></style>
